import React from 'react';
import { Tabs, Tools } from 'weaver-mobile';
import Permission from '../permission';
import Maintain from './Maintain';
import BackBtn from '../backbtn';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import If from '../../../common/if';
import classNames from 'classnames';
import './index.less';

const getLabel = Tools.getLabel; 
const tabs = [
  { title: getLabel(523320, '表单填写权限'), sub: '1' },
  { title: getLabel(523321, '应用共享权限'), sub: '2' }
];

@inject('powerStore')
@withRouter
@observer
export default class Power extends React.Component {
  constructor(props) {
    super(props);
    
    const appid = props.match.params.id;

    this.store = props.powerStore;
    this.store.init(appid);
  } 
  
  render() {
    const { appid, onTabChange, tabIndex } = this.store;
    const backBtnAble = window.backBtnAble;

    return (
      <div className={classNames('edc-mobile-power', { 'edc-mobile-power-hasback': backBtnAble })}>
        <If condition={backBtnAble}>
          <BackBtn />
        </If>
        <Tabs
          tabs={tabs}
          onChange={onTabChange}
          page={tabIndex}
        >
          <Permission appid={appid} showInTab={true} />
          <Maintain appid={appid} />
        </Tabs>
      </div>
    )
  }
}